<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="vue_det">
        <!--{{ }} 用于输出对象属性和函数返回值。-->
        <h1>site:{{site}}</h1>
        <h1>url:{{url}}</h1>
        <h1>{{details()}}</h1>
        <p>当前数字{{ count }}</p>
        <button @click="btnClicked">change</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',// 用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串.
            data: {   //data 用于定义属性,储存数据(数据供el所指定的容器去使用)，
                // 实例中有三个属性分别为：site、url、alexa。
                site: "jia",
                url: "www.jia.com",
                alexa: "1000",
                count: 1
            },
            //methods 用于定义的函数，可以通过 return 来返回函数值。
            methods: {
                details: function () {
                    return this.site + "学的不仅是技术,更是梦想";
                },

                btnClicked() {
                    this.count++

                    this.url = 'www.lgb.com'
                }
            }
        })
    </script>
</body>

</html>